import React, { Component } from 'react'
import { connect } from 'react-redux'
import * as actions from '../../redux/actions/count'

//使用connect创建并暴露CountUI组件的容器
//第一个方法的第一个参数传的是返回状态对象的函数，函数默认接收state
//第一个方法的第二个参数传的是返回操作状态对象的函数，函数默认接收store的dispatch方法
export default connect(state=>({count:state.count,NNT:state.persons.length}),{...actions})(class Count extends Component {

  increment=()=>{
    const { value } = this.selectNumber
    const { increment } = this.props
    increment(value*1)
  }

  decrement=()=>{
    const { value } = this.selectNumber
    const { decrement } = this.props
    decrement(value*1)
  }

  incrementIfOdd=()=>{
    const { value } = this.selectNumber
    const { count,increment } = this.props
    if(count%2===1) increment(value*1)
  }

  incrementAsync=()=>{
    const { value } = this.selectNumber
    const { incrementAsync } = this.props
    incrementAsync(value*1,1000)
  }

  render() {
    const { count,NNT } = this.props
    return (
      <div>
        <h2>我是count组件</h2>
        <h1>当前求和为：{count}，下方组件人数为：{NNT}</h1>
        <select ref={e=>this.selectNumber=e}>
          <option value="1">1</option>
          <option value="2">2</option>
          <option value="3">3</option>
        </select>&nbsp;
        <button onClick={this.increment}>+</button>&nbsp;
        <button onClick={this.decrement}>-</button>&nbsp;
        <button onClick={this.incrementIfOdd}>当前求和为奇数再加</button>&nbsp;
        <button onClick={this.incrementAsync}>异步加</button>&nbsp;
      </div>
    )
  }
}
)